<template>
  <div class="router-demo-container">
    <el-card>
      <template #header>
        <h2>Vue Router 路由跳转演示</h2>
      </template>

      <!-- 声明式导航 -->
      <el-divider content-position="left">
        <el-tag type="primary">声明式导航 (router-link)</el-tag>
      </el-divider>

      <div class="demo-section">
        <h3>1. 基础跳转</h3>
        <el-space wrap>
          <router-link to="/dashboard">
            <el-button type="primary">跳转到仪表板</el-button>
          </router-link>
          <router-link to="/about">
            <el-button type="success">跳转到关于页</el-button>
          </router-link>
        </el-space>
      </div>

      <div class="demo-section">
        <h3>2. 命名路由跳转</h3>
        <el-space wrap>
          <router-link :to="{ name: '_dashboard' }">
            <el-button type="primary">通过名称跳转到仪表板</el-button>
          </router-link>
        </el-space>
      </div>

      <div class="demo-section">
        <h3>3. Query 参数跳转</h3>
        <p class="tip">URL 示例: /about?id=123&name=张三</p>
        <el-space wrap>
          <router-link :to="{ path: '/about', query: { id: 123, name: '张三' } }">
            <el-button type="info">Query 跳转 (对象)</el-button>
          </router-link>
          <router-link to="/about?category=tech&page=1">
            <el-button type="info" plain>Query 跳转 (字符串)</el-button>
          </router-link>
        </el-space>
      </div>

      <!-- 编程式导航 -->
      <el-divider content-position="left">
        <el-tag type="success">编程式导航 (router.push)</el-tag>
      </el-divider>

      <div class="demo-section">
        <h3>4. router.push() 跳转</h3>
        <el-space wrap>
          <el-button type="primary" @click="jumpByPath">
            push 路径跳转
          </el-button>
          <el-button type="success" @click="jumpByName">
            push 命名路由跳转
          </el-button>
        </el-space>
      </div>

      <div class="demo-section">
        <h3>5. Query 参数跳转（编程式）</h3>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-input v-model="queryParams.id" placeholder="输入 ID" />
          </el-col>
          <el-col :span="12">
            <el-input v-model="queryParams.name" placeholder="输入名称" />
          </el-col>
        </el-row>
        <el-button type="info" @click="jumpWithQuery" style="margin-top: 10px">
          带 Query 参数跳转
        </el-button>
        <p class="tip">当前 Query 参数: {{ JSON.stringify(queryParams) }}</p>
      </div>

      <div class="demo-section">
        <h3>6. Params 参数跳转（动态路由）</h3>
        <p class="tip">
          注意：params 需要配合命名路由使用，且路由需要定义 path: '/detail/:id'
        </p>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-input v-model="paramsId" placeholder="输入 Params ID" />
          </el-col>
          <el-col :span="12">
            <el-button type="warning" @click="jumpWithParams">
              带 Params 参数跳转
            </el-button>
          </el-col>
        </el-row>
        <p class="tip">
          将跳转到: /routerDetail/{{ paramsId || 'xxx' }}
        </p>
      </div>

      <!-- 其他路由操作 -->
      <el-divider content-position="left">
        <el-tag type="warning">其他路由操作</el-tag>
      </el-divider>

      <div class="demo-section">
        <h3>7. router.replace() - 替换当前路由</h3>
        <p class="tip">不会在历史记录中留下记录</p>
        <el-button type="warning" @click="replaceRoute">
          replace 跳转（不留历史）
        </el-button>
      </div>

      <div class="demo-section">
        <h3>8. 历史记录导航</h3>
        <el-space wrap>
          <el-button @click="goBack">后退 (go -1)</el-button>
          <el-button @click="goForward">前进 (go 1)</el-button>
          <el-button @click="router.go(0)">刷新当前页</el-button>
        </el-space>
      </div>

      <div class="demo-section">
        <h3>9. 新窗口打开</h3>
        <el-button type="primary" @click="openInNewTab">
          在新标签页打开
        </el-button>
      </div>

      <!-- 当前路由信息 -->
      <el-divider content-position="left">
        <el-tag type="info">当前路由信息</el-tag>
      </el-divider>

      <div class="demo-section">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="当前路径">
            {{ route.path }}
          </el-descriptions-item>
          <el-descriptions-item label="路由名称">
            {{ route.name }}
          </el-descriptions-item>
          <el-descriptions-item label="Query 参数">
            {{ JSON.stringify(route.query) }}
          </el-descriptions-item>
          <el-descriptions-item label="Params 参数">
            {{ JSON.stringify(route.params) }}
          </el-descriptions-item>
          <el-descriptions-item label="完整路径">
            {{ route.fullPath }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 代码示例 -->
      <el-divider content-position="left">
        <el-tag>代码示例</el-tag>
      </el-divider>

      <div class="demo-section">
        <el-collapse>
          <el-collapse-item title="查看代码示例" name="1">
            <pre class="code-block">
// 1. 基础跳转
router.push('/dashboard')
router.push({ path: '/dashboard' })
router.push({ name: '_dashboard' })

// 2. Query 参数跳转
router.push({ 
  path: '/about', 
  query: { id: 123, name: '张三' } 
})
// URL: /about?id=123&name=张三

// 3. Params 参数跳转（需要命名路由）
router.push({ 
  name: 'UserDetail', 
  params: { id: 123 } 
})
// 需要路由配置: { path: '/user/:id', name: 'UserDetail' }

// 4. Replace 跳转（不留历史记录）
router.replace('/dashboard')

// 5. 历史记录操作
router.go(-1)  // 后退
router.go(1)   // 前进
router.go(0)   // 刷新

// 6. 获取路由信息
const route = useRoute()
console.log(route.query.id)     // 获取 query 参数
console.log(route.params.id)    // 获取 params 参数
console.log(route.path)         // 当前路径
console.log(route.fullPath)     // 完整路径（含参数）
            </pre>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';

defineOptions({
  name: '_router_page'
})

const router = useRouter();
const route = useRoute();

// Query 参数
const queryParams = ref({
  id: '1001',
  name: '测试用户'
});

// Params 参数
const paramsId = ref('123');

// 1. 路径跳转
const jumpByPath = () => {
  router.push('/dashboard');
  ElMessage.success('跳转到 /dashboard');
};

// 2. 命名路由跳转
const jumpByName = () => {
  router.push({ name: '_dashboard' });
  ElMessage.success('通过命名路由跳转');
};

// 3. Query 参数跳转
const jumpWithQuery = () => {
  router.push({
    path: '/about',
    query: queryParams.value
  });
  ElMessage.success(`跳转并携带 Query: ${JSON.stringify(queryParams.value)}`);
};

// 4. Params 参数跳转
const jumpWithParams = () => {
  // 注意：需要先创建对应的路由
  router.push({
    name: 'RouterDetail',
    params: { id: paramsId.value }
  });
  ElMessage.success(`跳转并携带 Params: ${paramsId.value}`);
};

// 5. Replace 跳转
const replaceRoute = () => {
  router.replace('/product');
  ElMessage.info('Replace 跳转到产品页（不留历史记录）');
};

// 6. 后退
const goBack = () => {
  router.go(-1);
  ElMessage.info('返回上一页');
};

// 7. 前进
const goForward = () => {
  router.go(1);
  ElMessage.info('前进到下一页');
};

// 8. 新窗口打开
const openInNewTab = () => {
  const routeUrl = router.resolve({
    path: '/about',
    query: { from: 'newTab' }
  });
  window.open(routeUrl.href, '_blank');
  ElMessage.success('在新标签页打开');
};
</script>

<style lang="scss" scoped>

.demo-section {
  margin: 20px 0;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;

  h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    font-size: 16px;
  }

  .tip {
    margin: 10px 0;
    padding: 8px 12px;
    background-color: #fff;
    border-left: 3px solid #409eff;
    font-size: 13px;
    color: #606266;
  }
}

.code-block {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
}

:deep(.el-divider__text) {
  background-color: #fff;
}
</style>
